﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" lasteditedby="Geert" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd">
  <title translate="true">How to use events with MVVM?</title>
  <keywords>
    <keyword translate="true">Commands</keyword>
    <keyword translate="true">Events</keyword>
    <keyword translate="true">FAQ</keyword>
  </keywords>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">How to use events with MVVM?</text></para>
    </header>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">When writing MVVM, it&apos;s &quot;forbidden&quot; (read: not a best practice) to use click handlers (or other UI events) in your view-model. But then should you react to events?</text></para>
    <list id="1" type="ol" listtype="decimal" formatstring="&#37;&#48;&#58;&#115;&#46;" format-charset="DEFAULT_CHARSET" levelreset="true" legalstyle="false" startfrom="1" styleclass="Normal (list)" style="font-family:Arial; font-size:10pt; color:#000000;">
      <li styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Start with creating a command like you are used to using MVVM. This command will be executed when the event occurs.</text></li>
      <li styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Add a reference to System.Windows.Interactivity.dll (ships with Catel). If you have used </text><link displaytype="text" defaultstyle="true" type="weblink" href="http://www.nuget.org" target="_blank" styleclass="Normal (list)" translate="true">NuGet</link><text styleclass="Normal (list)" translate="true"> to add a reference, it is automatically included for you.</text></li>
      <li styleclass="Normal (list)"><text styleclass="Normal (list)" translate="true">Add the following namespace definitions to your view declaration:</text></li>
    </list>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">xmlns:i=&quot;clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity&quot;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">xmlns:catel=&quot;http://catel.codeplex.com&quot;</text></para>
    <list id="1" type="ol" listtype="decimal" formatstring="&#37;&#48;&#58;&#115;&#46;" format-charset="DEFAULT_CHARSET" levelreset="true" legalstyle="false" startfrom="1" styleclass="Normal" style="font-family:Arial; font-size:10pt; color:#000000;">
      <li styleclass="Normal"><text styleclass="Normal" translate="true">Use the following code to convert an event to a command:</text></li>
    </list>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#0000ff;" translate="true">i</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">:Interaction.Triggers&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#0000ff;" translate="true">i</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">:EventTrigger</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">EventName=</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;[YourEvent]&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">&lt;catel:EventToCommand</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&#32;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Command=</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;{Binding [YourCommand]}&quot; </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">DisableAssociatedObjectOnCannotExecute=</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;False&quot; </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">/&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#0000ff;" translate="true">/i</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">:EventTrigger&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#0000ff;" translate="true">/i</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">:Interaction.Triggers&gt;</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">An example for a </text><text styleclass="Normal" style="font-style:italic;" translate="true">ListBox</text><text styleclass="Normal" translate="true"> double click:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> ItemsSource=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding PersonCollection}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; SelectedItem=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding SelectedPerson}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Triggers</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:EventTrigger</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> EventName=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">MouseDoubleClick</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">catel:EventToCommand</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Command=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding Edit}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; DisableAssociatedObjectOnCannotExecute=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">False</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:EventTrigger</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Triggers</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox.ItemTemplate</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">DataTemplate</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">StackPanel</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Orientation=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Horizontal</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Label</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Content=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding FirstName}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Label</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Content=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding MiddleName}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">Label</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> Content=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding LastName}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">StackPanel</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">DataTemplate</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox.ItemTemplate</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text></para>
  </body>
</topic>
